useEffect를 기명 함수와 함께 사용하는 방법

useEffect의 기본 이해

React의 useEffect는 컴포넌트가 렌더링된 이후 특정 작업을 수행할 수 있게 해주는 훅입니다. 흔히 데이터 fetching, 구독 설정, DOM 업데이트 등 다양한 side effect를 처리할 때 사용됩니다. useEffect의 기본 형태는 다음과 같습니다:

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // 여기에 side effect를 처리하는 코드 작성
    console.log('컴포넌트가 렌더링되었습니다.');

    return () => {
      // cleanup 작업
      console.log('컴포넌트가 언마운트됩니다.');
    };
  }, []);

  return <div>Example Component</div>;
}

기명 함수의 필요성

위의 예제처럼 useEffect는 익명 함수 형태로 주로 사용됩니다. 하지만 복잡한 작업을 수행하거나 여러 useEffect 훅을 사용하는 경우, 코드의 가독성을 높이기 위해 기명 함수를 사용하는 것이 좋습니다. 기명 함수는 함수에 이름을 붙여서 코드의 의도를 명확히 하고, 코드 재사용성을 높여줍니다.

기명 함수 사용 예시

다음은 useEffect를 기명 함수와 함께 사용하는 예제입니다. 데이터 fetching과 cleanup 작업을 별도의 함수로 분리하여 가독성을 높였습니다.

import React, { useEffect, useState } from 'react';

function fetchData() {
  // 데이터를 가져오는 함수
  console.log('데이터를 가져오는 중...');
  // 여기서 실제 데이터 fetching 로직을 추가하세요.
}

function cleanup() {
  // cleanup 작업을 하는 함수
  console.log('cleanup 작업을 수행 중...');
  // 여기서 실제 cleanup 로직을 추가하세요.
}

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData();

    return cleanup;
  }, []);

  return (
    <div>
      <p>Example Component</p>
      {data && <p>Data: {data}</p>}
    </div>
  );
}

코드 설명

fetchData 함수: 데이터 fetching 로직을 포함합니다.
cleanup 함수: 컴포넌트 언마운트 시 수행될 cleanup 작업을 포함합니다.
useEffect 내부: useEffect 안에서 fetchData와 cleanup 함수를 호출합니다.

이렇게 하면 각 함수가 어떤 작업을 하는지 명확하게 알 수 있어 코드의 가독성이 크게 향상됩니다.

주의할 점

의존성 배열: useEffect의 두 번째 인자로 전달되는 배열은 언제 이 effect가 실행될지를 결정합니다. 빈 배열 []을 전달하면, 이 effect는 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다. 만약 특정 값이 변경될 때마다 effect를 실행하고 싶다면, 그 값을 배열에 추가해야 합니다.
비동기 함수 사용: useEffect 내에서 비동기 작업을 할 때는 주의가 필요합니다. useEffect는 비동기 함수를 직접 받을 수 없기 때문에, 비동기 함수를 내부에서 호출해야 합니다. 예를 들어:
```
useEffect(() => {
  async function fetchData() {
    // 비동기 데이터 fetching 로직
  }
  fetchData();
}, []);
```
의존성 문제: useEffect 내에서 사용하는 모든 변수나 함수는 의존성 배열에 포함되어야 합니다. 그렇지 않으면 의도치 않은 버그가 발생할 수 있습니다. 이를 자동으로 처리해주는 ESLint 플러그인도 있으니 적극 활용하시길 권장합니다.

더 알아보기

데이터 fetching: 데이터를 가져오는 다양한 방법과 그 장단점에 대해 알아보세요.
cleanup 함수: 컴포넌트 언마운트 시 수행해야 할 작업에 대해 더 깊이 이해해보세요.
의존성 배열 관리: useEffect의 의존성 배열을 효율적으로 관리하는 방법을 학습하세요.

내용 요약과 다음 주제

useEffect를 기명 함수와 함께 사용하면 코드의 가독성이 높아지고 유지보수가 용이해집니다. 기명 함수로 데이터를 fetching하거나 cleanup 작업을 수행하여 useEffect 내부의 복잡성을 줄일 수 있습니다. 다음 주제인 useEffect로 한 가지 역할만 수행해야 하는 이유에서는 각 useEffect 훅이 하나의 역할만 수행하도록 함으로써 코드의 가독성과 유지보수성을 높이는 방법에 대해 설명합니다.

useEffect의 기본 이해​

기명 함수의 필요성​

기명 함수 사용 예시​

코드 설명​

주의할 점​

더 알아보기​

내용 요약과 다음 주제​